<template>
	<div class="scroll">
		<h3>
			游侠<br />攻略
		</h3>
		<ul :class="{animationTop}">
			<li v-for="item in scrollList" :key="item.id">
				<span></span>
				{{item.title}}
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	name:'Scroll',
	data(){
		return{
			animationTop : false,
			scrollList:[
				{ id:1 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
				{ id:2 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
				{ id:3 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
				{ id:4 , title:'跨国骑行初体验——日本富士山骑行攻略' },
				{ id:5 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
				{ id:6 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
				{ id:7 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
				{ id:8 , title:'跨国骑行初体验——日本富士山骑行攻略' },
			]
		}
	},
	mounted(){
		setInterval( this.showList , 2000 );
	},
	methods:{
		//每隔2秒，数据向上滚动一条
		//2秒之内，将移除的数据剪刀数组的最后一条：animationTop恢复成false；才能保证下一次执行滚动的时候有效果
		showList(){
			//每隔2秒，将当前的第一条数据移除-0.67rem
			this.animationTop = true;
			//在2秒之间，执行：500毫秒之后：将当前数组的第一条数据添加到数组的末尾
			setTimeout( ()=>{
				this.scrollList.push( this.scrollList[0] );
				//将当前已经移除的第一条数据，删除
				this.scrollList.shift();
				//动画停止，等待下一次播放
				this.animationTop = false;
				
			} , 500 )
		}
	}
}
</script>

<style scoped>
/* 动画样式 */
.scroll .animationTop{
	margin-top: -0.67rem;
	height: 2.17rem;
	transition: all 0.5s;
}
.scroll{
	width: 100%;
	height: 1.4rem;
	/* 渐变是发生在背景图片上的样式 */
	background-image: linear-gradient(#fbffaf , #ffffed);
	overflow: hidden;
}
.scroll h3{
	height: 1.5rem;
	width: 15%;
	font-size: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: gold;
	font-style: italic;
	font-weight: bold;
	float: left;
}
.scroll ul{
	float: left;
	width: 78%;
	margin-left: 0.4rem;
	height: 1.5rem;
}
/* 设置省略号：行高【限制到每次只能看到2条数据】 */
.scroll ul li{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 0.3rem;
	line-height: 0.67rem;
	width: 100%;
}
.scroll ul li span{
	display: inline-block;
	width: 0.2rem;
	height: 0.2rem;
	border-radius: 0.1rem;
	background-color: gold;
	margin-right: 0.2rem;
}
</style>
